<template>
  <view class="category">
    <view class="category_left">
      <view class="l-item" :class="{ 'l-item--active': item.id === tabIndex}" v-for="item in categoryList" :key="item.id" @tap="selectCategory(item)">
        <view class="i-name">{{ item.name }}</view>
      </view>
    </view>
    <view class="category_right">
      <ljf-list-page :config="page.config" :form="page.form" :empty-tip="'暂无商品'" ref="listPage">
        <template v-slot="{ listData }">
          <view class="goods-card" v-for="item in listData" :key="item.id">
            <view class="c_left" @tap="navGoodsDetail(item.id)">
              <ljf-img-loader />
            </view>
            <view class="c_right">
              <view class="r-name" @tap="navGoodsDetail(item.id)">{{ getObjVal(item,'title') }}</view>
              <view class="r-description" @tap="navGoodsDetail(item.id)">{{ getObjVal(item,'description') }}</view>
              <view class="r-bottom">
                <view class="r-bottom_amount">￥{{ getObjVal(item,'amountCost',0) }}</view>
                <view class="r-bottom_btn" @tap="popup.fn.openHandle(item.id)">兑换</view>
              </view>
            </view>
          </view>
        </template>
      </ljf-list-page>
    </view>
    <card-scan @toBindCard="isBindCardShow = $event"></card-scan>
    <card-bind :show="isBindCardShow" @cancel="isBindCardShow = $event"></card-bind>
    <ljf-goods-popup :show="popup.attr.show" @close="popup.attr.show = false"></ljf-goods-popup>
  </view>
</template>

<script>
import cardBind from '@/components/ljf/card/bind.vue';
import cardScan from '@/components/ljf/card/scan.vue';

import {
 model
} from '@/model';
const {
  Goods
} = model.collection;

export default {
  components: {
    cardBind,
    cardScan
  },
  data () {
    return {
      tabIndex: 0,
      categoryList: [],
      page: {
        config: {
          entity: "Goods",
          action: "page",
          enablePull: true,
        },
        form: {
          query: {
            categoryId: 0
          }
        }
      },
      popup:{
        attr:{
          id:0,
          show:false
        },
        fn:{
          openHandle:(e)=> {
            this.popup.attr.id = e;
            this.popup.attr.show = true;
          }
        }
      }
    }
  },
  created () {
    this.getCategoryList();
  },
  methods: {
    getCategoryList () {
      Goods.sendApi('categoryList', {
        params: {},
        data: {}
      }).then(res => {
        if (res.status) {
          this.categoryList = res.data;
          if (res.data.length) {
            this.tabIndex = res.data[0].id;
            this.page.form.query.categoryId = res.data[0].id;
          }
        }
      })
    },
    selectCategory (e) {
      this.tabIndex = Number(e.id);
      this.page.form.query.categoryId = Number(e.id);
    },
    navGoodsDetail(id) {
      this.nav(`/subpackage/goods/pages/detail/index?id=${id}`)
    }
  }
}
</script>
<style lang="less">
.category {
  display: flex;
  width: 100vw;
  height: 100vh;
  background: #f7f7f7;
  box-sizing: border-box;
  &_left {
    width: 180rpx;
    height: 100%;
    overflow-y: auto;
    .l-item {
      .layout_flex(@j:center);
      width: 160;
      height: 104rpx;
      padding: 0 10rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #666;
      .i-name {
        width: 100rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &--active {
        position: relative;
        font-weight: bold;
        color: #333;
        background: #fff;
        &::before {
          position: absolute;
          top: 45%;
          left: 20rpx;
          content: "";
          width: 6rpx;
          height: 20rpx;
          background: linear-gradient(0deg, #ff6f04, #ff3c2c);
          border-radius: 3rpx;
        }
      }
    }
  }
  &_right {
    flex: 1;
    height: 100%;
    padding: 20rpx;
    overflow-y: auto;
    box-sizing: border-box;
    /deep/ .list-page {
      width: 530rpx;
      padding-top: 20rpx;
    }
    .goods-card {
      .layout_flex(@j:space-between);
      width: 100%;
      height: 220rpx;
      padding: 0 20rpx;
      margin-bottom: 20rpx;
      background: #fff;
      border-radius: 10rpx;
      box-sizing: border-box;
      .c_left {
        width: 180rpx;
        height: 180rpx;
        margin-right: 20rpx;
        border-radius: 15rpx;
      }
      .c_right {
        flex: 1;

        .r-name {
          width: 300rpx;
          height: 60rpx;
          font-size: 30rpx;
          font-weight: 500;
          color: #333;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .r-description {
          width: 300rpx;
          height: 30rpx;
          font-size: 26rpx;
          font-weight: 500;
          color: #999;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .r-bottom {
          .layout_flex(@j:space-between);
          margin-top: 30rpx;
          &_amount {
            font-size: 36rpx;
            font-weight: bold;
            color: #ff0000;
          }
          &_btn {
            .layout_flex(@j:center);
            width: 120rpx;
            height: 60rpx;
            font-size: 30rpx;
            font-weight: 500;
            color: #ff3d2b;
            border: 1rpx solid #ff3d2b;
            border-radius: 30rpx;
          }
        }
      }
    }
  }
}
</style>
